<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .yeye {
            width: 250px;
            height: 250px;
            background-color: #2ca9cf;
        }

        .parent {
            width: 180px;
            height: 180px;
            background-color: #b429c9;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: #5db535;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 1.表单修饰符  lazy  trim  number -->
        <h3>表单修饰符</h3>
        <div>val:{{val}}</div>
        <input type="text" v-model.lazy.trim="val">
        <input type="text" v-model.trim="val">
        <hr>

        <!-- 2.鼠标按键修饰符 left right -->
        <button @click="_click(0)">点击事件</button>
        <button @click.left="_click(1)">点击事件.left</button>
        <button @click.right="_click(2)">点击事件.right</button>
        <hr>

        <!-- 3.v-bind 属性修饰符 async  camel  prop -->
        <input type="text" :index.prop="1">
        <hr>

        <!-- 4.事件修饰符 -->
        <!-- 
            prevent 阻止默认行为
            stop 阻止事件传播
            self 触发的目标元素是自己才执行
            capture 实现事件（监听）
            once 一次性事件绑定
         -->
        <!-- prevent 阻止默认行为 -->
        <button @contextmenu.prevent="yj">鼠标右击事件</button>
        <hr>

        <!-- stop 阻止事件传播 -->
        <div class="yeye" @click="ye()">
            yeye
            <div class="parent" @click="par">
                parent
                <div class="child" @click.stop="child">
                    child
                </div>
            </div>
        </div>
        <hr>

        <!-- self 触发的目标元素是自己时才执行 -->
        <div class="yeye" @click.self="ye()">
            yeye
            <div class="parent" @click="par">
                parent
                <div class="child" @click="child">
                    child
                </div>
            </div>
        </div>
        <hr>

        <!-- capture 实现事件（监听） -->
        <div class="yeye" @click.capture="ye()">
            yeye
            <div class="parent" @click="par">
                parent
                <div class="child" @click.capture="child">
                    child
                </div>
            </div>
        </div>
        <hr>

        <!-- once 一次性事件绑定 -->
        <button @click.once="once">once</button>
        <hr>

        <!-- 
            键盘事件修饰符
                left  左方向键
                right  右方向键
                up  上方向键
                down  下方向键
                enter  回车
                13  键码
         -->
        <input type="text" @keyup.up.13="_keyup">
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            val: "",
        },
        methods: {
            _click(a){
                console.log(a);
            },
            yj(){
                console.log(1111);
            },
            ye(){
                console.log('yeye');
            },
            par(){
                console.log('parent');
            },
            child(){
                console.log('child');
            },
            once(){
                console.log(1231);
            },
            _keyup(e){
                console.log(e.target.value);
            }
        }
    })
</script>

</html>